<template>
	<view class="cart">
		<!-- 购物车为空 -->
		<!-- <view class="header" v-show="xh_cart.length===0">
			<image src="@/static/cart/cart-bj.png" mode="widthFix"></image>
		</view> -->
		<!-- 购物车不为空 -->
		<view class="">
			<view class="cart_top">
				<view class=""></view>
				<view class="" @click="Toggle('现货')" :class="{xhStyle:menuName == '现货'}">现货</view>
				<view class="" @click="Toggle('定货')" :class="{xhStyle:menuName == '定货'}">定货</view>
				<view class="" @click="toggleEdit()">{{ editing ? '编辑' : '管理' }}</view>
			</view>
			<!-- 内容 -->
			<!-- 现货 -->
			<view class="cart_list" v-show="menuName == '现货'"><!-- v-if="goodsInfo.xh_cart_list.length===0" -->
				<view class="cart_list_img" v-if="buy_number===null">
					<image src="https://t1.chowtaiking.com.cn/img/ruoyi/2023/12/19/ddcef58feb3f4048818957c8c05c7fe3.png" mode="widthFix"></image>
				</view>
				<view class="list-item" v-else>
					<view class="item" v-for="(item,index) in data_list" :key="index">
						<view class="select" @click="selectGoods(index)">
							<image src="https://t1.chowtaiking.com.cn/img/ruoyi/2023/12/19/f9eb824f298940dcb22b2101b3f9a6da.png" v-if="xhState[index]"></image>
							<image src="https://t1.chowtaiking.com.cn/img/ruoyi/2023/12/19/7efb97c459984231adba489239078aaa.png" v-else></image>
						</view>
						<view class="goodsInfo">
							<image :src="item.images" mode="widthFix"></image>
							<view class="info">
								<!-- 标题 -->
								<view class="title">
									<view class="fh_time">明日发货</view>
									<view class="info_name">{{item.title}}</view>
								</view>
								<!-- 金重 款号 -->
								<view class="info_weight">
									<view class="gold_weight">金重：约{{item.weight}}g</view>
									<view class="kh">款号：{{item.barCode}}</view>
								</view>
								<!-- 规格 周期 -->
								<view class="info_weight">
									<view class="gold_weight">规格：{{item.size}}</view>
									<view class="kh">定货周期：<text class="red">{{item.cycle}}</text>工作日</view>
								</view>
								<!-- 定金 -->
								<view class="jgsl">
									<view class="price">定金：￥{{item.price}}</view>
									<view class="num">
										<view class="buyNum" @click="add(-1,index)">-</view>
										<view class="buyNum">{{item.buyNum}}</view>
										<view class="buyNum" @click="add(1,index)">+</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 定货 -->
			<view class="cart_list" v-show="menuName == '定货'"> <!-- v-if="goodsInfo.dh_cart_list.length == 0" -->
				<view class="cart_list_img" v-if="buy_number===null">
					<image src="https://t1.chowtaiking.com.cn/img/ruoyi/2023/12/19/ddcef58feb3f4048818957c8c05c7fe3.png" mode="widthFix"></image>
				</view>
				<view class="list-item" v-else>
					<view class="item" v-for="(item,index) in goodsInfo.dh_cart_list" :key="index">
						<view class="select" @click="selectGoods(index)">
							<image src="https://t1.chowtaiking.com.cn/img/ruoyi/2023/12/19/f9eb824f298940dcb22b2101b3f9a6da.png" v-if="dhState[index]"></image>
							<image src="https://t1.chowtaiking.com.cn/img/ruoyi/2023/12/19/7efb97c459984231adba489239078aaa.png" v-else></image>
						</view>
						<view class="goodsInfo">
							<image :src="item.imgUrl" mode="widthFix"></image>
							<view class="info">
								<!-- 标题 -->
								<view class="title">
									<view class="fh_time">明日发货</view>
									<view class="info_name">{{item.name}}</view>
								</view>
								<!-- 金重 款号 -->
								<view class="info_weight">
									<view class="gold_weight">金重：约{{item.weight}}g</view>
									<view class="kh">款号：{{item.barCode}}</view>
								</view>
								<!-- 规格 周期 -->
								<view class="info_weight">
									<view class="gold_weight">规格：{{item.size}}</view>
									<view class="kh">定货周期：<text class="red">{{item.cycle}}</text>工作日</view>
								</view>
								<!-- 定金 -->
								<view class="jgsl">
									<view class="price">定金：￥{{item.price}}</view>
									<view class="num">
										<view class="buyNum" @click="add(-1,index)">-</view>
										<view class="buyNum">{{item.buyNum}}</view>
										<view class="buyNum" @click="add(1,index)">+</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 底部 -->
			<view class="footer">
				<view class="footer_all" @click="selectAll">
					<image src="https://t1.chowtaiking.com.cn/img/ruoyi/2023/12/19/f9eb824f298940dcb22b2101b3f9a6da.png" v-if="menuName == '现货'?xhAll:dhAll"></image>
					<image src="https://t1.chowtaiking.com.cn/img/ruoyi/2023/12/19/7efb97c459984231adba489239078aaa.png" v-else></image>
					<view class="">全选</view>
				</view>
				<view class="total" v-if="!editing">合计：<text class="red">￥{{total_price}}</text></view>
				<view class="settlement" @click="deleteGoods()">{{ !editing ? '去结算(0)' : '删除(0)' }}</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		props: ["goodsInfo", "selectResult",
			"xhState", "dhState", "xhAll", "dhAll","data_list","buy_number","total_price"
		],
		data() {
			return {
				editing: false,
				menuState: true,
				menuName: '现货',
				buyNum: 0,
				
			}
		},
		methods: {
			// 勾选商品
			selectGoods(index) {

				this.$emit("select", {
					index,
					name: this.menuName
				})
				// this.$emit("selected_event")
			},
			/**
			 * 全选
			 */
			selectAll() {
				this.$emit("selectAll", this.menuName)
			},
			// 编辑  管理
			toggleEdit() {
				this.editing = !this.editing
			},
			// 数量加减
			add(type, index) {
				this.$emit("add", {
					type,
					index,
					name: this.menuName
				})

			},
			// 删除 结算
			deleteGoods() {
				let xhId = uni.getStorageSync("xhId")
				let dhId = uni.getStorageSync("dhId")
				console.log("xhId:", xhId);
				console.log("dhId:", dhId);
				console.log("editing:", this.editing);
				// 删除
				if (this.editing) {

					console.log("删除");
					if (xhId.length == 0) {
						console.log("未选择商品");
						uni.showToast({
							title: '请先选择商品',
							duration: 2000
						});
					} else {
						console.log("已选择商品，触发删除操作");
						this.$emit("remove", this.menuName)
					}
					// 结算
				} else {
					uni.navigateTo({
						url:"/pages/confirmOrder/confirmOrder"
					})
					console.log("结算");
					if (dhId.length == 0) {
						console.log("未选择商品");
						uni.showToast({
							title: '请先选择商品',
							duration: 2000
						});
					}else{
						this.$emit("total",this.menuName)
						
					}
				}
			},
			// 现货  定货
			Toggle(type) {
				this.menuName = type

			}
		},
		computed: {
			
		},
		mounted() {

		},
		onLoad() {

		}
	}
</script>

<style lang="less" scoped>
	// .header image {
	// 	width: 100%;
	// 	margin: auto;
	// 	display: block;
	// }
	.cart_list_img image {
		width: 100%;
		margin: 20px auto;
		display: block;
	}

	.xhStyle {
		color: red;
		border-bottom: 1px solid red;
	}

	.cart {
		.cart_top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-left: 15px;
			padding-right: 15px;
		}
	}

	.list-item {
		margin-top: 15px;
	}

	.item {
		height: 100px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: white;

		.select {
			margin-left: 15rpx;

			image {
				width: 50rpx;
				height: 50rpx;
			}
		}

		.goodsInfo {
			width: 90%;
			display: flex;
			justify-content: start;
			align-items: center;
			margin-left: 15rpx;

			image {
				width: 160rpx;
				height: 160rpx;
			}

			.info {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin-left: 10px;
				font-size: 14px;
				height: 80px;

				.title {
					display: flex;

					.fh_time {
						width: 30px;
						height: 20px;
						background-color: red;
						font-size: 8px;
						border-radius: 5px;
						color: white;
						text-align: center;
						line-height: 20px;
						margin-right: 5px;
					}

					.info_name {
						width: 190px;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						font-size: 15px;
					}
				}

				.info_weight {
					display: flex;
					font-size: 12px;
					color: gray;

					.gold_weight {
						margin-right: 10px;
					}
				}

				.jgsl {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.price {
						// color: #d49373;
						color: red;
						font-size: 13px;
					}

					.num {
						width: 45px;
						height: 15px;
						line-height: 15px;
						border: 1px solid darkgray;
						display: flex;
						align-items: center;
						font-size: 10px;

						.buyNum {
							text-align: center;
							line-height: 15px;
							height: 15px;
							width: 15px;
							border-right: 1px solid darkgray;
						}
					}

				}
			}

		}
	}

	.red {
		color: red;
	}

	.footer {
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: white;
		height: 50px;
		line-height: 50px;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.footer_all {
			display: flex;
			align-items: center;

			image {
				width: 50rpx;
				height: 50rpx !important;
				margin-left: 5px;
				margin-right: 5px;
			}
		}
	}

	.footer .settlement {
		text-align: center;
		line-height: 50px;
		height: 50px;
		width: 120px;
		background-color: orange;
	}

	.active {
		background-color: #d49373;
	}
</style>